<script>
/**
 * total - 总的记录数
 * pageSize - 每页的记录数
 * curPage - 当前页
 * showInfo - 是否显示页数信息
 */
export default {
    props: ["total", "pageSize", "curPage", "showInfo"],
    emits: ["goto"],
    data() {
        return {
            pageNum: 0
        }
    },
    methods: {
        goto(page) {
            this.$emit("goto", page);
        }
    },
    mounted() {
        this.pageNum = Math.ceil(this.total/ this.pageSize);
    },
    updated(){
        this.pageNum = Math.ceil(this.total/ this.pageSize);
    }
}
</script>

<template>
    <div class="pagination">
        <div class="prev">
            <a :class="{ disabled: curPage <= 1 }" href="javascript:void(0);" @click="goto(curPage - 1)">&lt;</a>
        </div>
        <div class="pages" :class="{ 'cur-page': curPage === page }" v-for="page in pageNum" :key="page">
            <a href="javascript:void(0);" @click="goto(page)">{{ page }}</a>
        </div>
        <div class="next">
            <a :class="{ disabled: curPage >= pageNum }" href="javascript:void(0);" @click="goto(curPage + 1)">&gt;</a>
        </div>
        <div v-if="showInfo">总{{ total }}条，第{{ curPage }}页 / 共{{ pageNum }}页</div>
    </div>
</template>

<style scoped>
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
}

.prev,
.next,
.pages {
    display: inline-block;
    font-size: 12px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    box-sizing: border-box;
    margin: 0 4px;
    background-color: rgba(240, 242, 245, 0.9);
    border-radius: 2px;
}

.pages>a {
    color: rgb(0, 0, 0);
}

.pages>a:hover {
    color: rgb(64, 158, 255);
}

.cur-page {
    background-color: rgb(64, 158, 255);
}

.cur-page>a {
    color: white;
    pointer-events: none;
}
</style>